<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Material ui 水波纹效果</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="#">
  <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
</head>
<style>
  button {
    display: block; /* button 默认是inline-block 无法用margin给它居中 */
    margin: 50px auto;
    height: 60px;
    width: 150px;
    color: #FFF;
    font-size: 16px;
    background: #E95546;
    outline: none;
    border: 0;
    cursor: pointer; /* 为了增加用户体验 */

    position: relative; /* 为了保持和ripple的位置关系 */
    overflow: hidden; /* 为了遮盖超出的ripple */
  }

  .ripple {
    position: absolute; /* 为了保持和button的位置关系 */
    border-radius: 50% 50%; /* 水波纹圆形 */
    background: rgba(255, 255, 255, 0.4);  /* 水波纹颜色 */

    /* 下面与动画效果相关 是0%时候的状态 */
    /* 默认的 transform-origin 是 center 即中心点 */
    transform: scale(0);
    -webkit-transform: scale(0);
    opacity: 1;
  }

  .rippleEffect {
    /* 执行时长0.6s、效果为渐变(linear)、名称为rippleDrop的动画 */
    -webkit-animation: rippleDrop .6s linear;
    animation: rippleDrop .6s linear;
  }

  @keyframes rippleDrop {
    /* 下面是动画100%时候的状态 */
    100% {
      transform: scale(2);
      -webkit-transform: scale(2);
      opacity: 0;
    }
  }

  @-webkit-keyframes rippleDrop {
    100% {
      transform: scale(2);
      -webkit-transform: scale(2);
      opacity: 0;
    }
  }
</style>
<body>
<div>
  <button>这是一个按钮</button>
</div>
</body>

<script>
$("button").click(function (e) {
  $(".ripple").remove(); // 每次先把之前添加的水波纹div删除

  let button_left = $(this).offset().left; // button距离页面左边的距离
  let button_top = $(this).offset().top; // button距离页面上边的距离
  let button_width = $(this).width(); // button的宽度
  let button_height = $(this).height(); // button的高度

  // 水波纹div为一个圆形，使得它的半径等于button的最长边，故在这里计算最长边是多少
  let ripple_width = 0;
  ripple_width = button_width > button_height ? button_width : button_height;

  // e.pageX是click事件的鼠标触发点距离页面左边的距离
  // e.pageY是click事件的鼠标触发点距离页面上边的距离
  // 这里的算法是，算出鼠标点击点的坐标为 (e.pageX - button_left, e.pageY - button_top)
  // 但是由于`transform-origin`默认是center，所以这里再减去半径才是div应该的位置
  let ripple_x = e.pageX - button_left - ripple_width / 2;
  let ripple_y = e.pageY - button_top - ripple_width / 2;

  // 往button里面塞水波纹div
  $(this).prepend("<div class='ripple'></div>");

  // 给水波纹div应用样式和动画
  $(".ripple")
    .css({
      width: ripple_width + 'px',
      height: ripple_width + 'px',
      top: ripple_y + 'px',
      left: ripple_x + 'px'
    })
    .addClass("rippleEffect");

})
</script>
</html>